<template>
  <div class="dpbjBox">
    <div class="dptopBox">
      <div class="titleBox">农业农产驾驶舱</div>
      <div class="tuichuBox" @click="fanhuifun">
        <img class="tuichuImg" src="/src/assets/daping/tuichu.png" alt="">
        <div>退出驾驶舱</div>
      </div>
    </div>
    <div class="dpnrBox">
      <div class="zuoyouBox">
        <ModuleBox title="价格明细">
          <template #TitleRight>
            <span class="baiseSize">元/KG</span>
          </template>
          <template #nr>
            <div class="jgmxTabs">
              <dpScrolling :products="sysProductTypeData" @selectedChange="jgmxChange"></dpScrolling>
            </div>
            <div class="jgmxListBox">
              <div class="tableThead">
                <div class="tableTheadTr">名称</div>
                <div class="tableTheadTr">今日价格</div>
                <div class="tableTheadTr">昨日价格</div>
                <div class="tableTheadTr">日增降额</div>
              </div>
              <div class="tableTbody" ref="tableTbodyRef">
                <div v-for="item in jgmxData" :key="item.id" class="tableTbodyTr">
                  <div class="tableTbodyTrTd">{{ item.product_name }}</div>
                  <div class="tableTbodyTrTd">{{ item.today_price?.toFixed(2) || 0 }}</div>
                  <div class="tableTbodyTrTd">{{ item.yesterday_price?.toFixed(2) || 0 }}</div>
                  <div class="tableTbodyTrTd" :style="{ color: item.price_change < 0 ? '#59FF00' : '#FF4400' }">
                    <span>{{ item.price_change < 0 ? '↓' : '↑' }}</span>
                        <span>{{ Math.abs(item.price_change).toFixed(2) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </ModuleBox>
      </div>
      <div class="zhongjianBox">
        <div class="topSelctBox">
          <div class="selectFlex">
            <div class="selectLabel">种植区域：</div>
            <div class="selectxlBox" v-if="CountyDeep >= 0">
              <dapingSelect v-model="shengSelectedValue" :options="shengQueryRegionListData" label-field="regionName"
                value-field="regionId" @change="shengChange"></dapingSelect>
            </div>
            <div class="selectxlBox" v-if="CountyDeep >= 1">
              <dapingSelect v-model="shiSelectedValue" :options="shiQueryRegionListData" label-field="regionName"
                value-field="regionId" @change="shengChange"></dapingSelect>
            </div>
            <div class="selectxlBox" v-if="CountyDeep >= 2">
              <dapingSelect v-model="xianquSelectedValue" :options="xianquQueryRegionListData" label-field="regionName"
                value-field="regionId" @change="shengChange"></dapingSelect>
            </div>
          </div>
          <div class="selectFlex">
            <div class="selectLabel">商品类型：</div>
            <div class="selectxlBox">
              <dapingSelect v-model="splxSelectedValue" :options="sysProductTypeData" label-field="dictLabel"
                value-field="dictValue" @change="splxChange">
              </dapingSelect>
            </div>
            <div class="selectxlBox" v-if="splxDeep >= 1">
              <dapingSelect v-model="splxejSelectedValue" :options="splxejSysProductTypeData" label-field="product_name"
                value-field="product_id" @change="splxejChange">
              </dapingSelect>
            </div>
          </div>
        </div>
        <div style="width: 100%;height: calc(65% - 20px);margin-bottom: 20px;">
          <MappingModule ref="mappingModuleRef" :mapData="MapData" @xqMapClick="MappingModuleClick">
          </MappingModule>
        </div>
        <div class="jgmxBox">
          <ModuleBox title="价格趋势" :topBjType="true">
            <template #TitleRight>
              <div style="width: 100px;height: 30px;margin-right: 10px;">
                <dapingSelect v-model="jgqsParameters.product_type" :options="sysProductTypeData"
                  label-field="dictLabel" value-field="dictValue" @change="jgqsSplxChange">
                </dapingSelect>
              </div>
              <div style="width: 100px;height: 30px;">
                <dapingSelect v-model="jgqsParameters.year" :options="yearTypeDate" @change="jgqsNfChange">
                </dapingSelect>
              </div>
            </template>
            <template #nr>
              <jgqsLineChart :data="jgqsData"></jgqsLineChart>
            </template>
          </ModuleBox>
        </div>
      </div>
      <div class="zuoyouBox">
        <div class="cnfxBox">
          <ModuleBox title="产能分析">
            <template #nr>
              <div class="cnfxTopBox">
                <div class="cnfxTopFor" v-for="item in cnfxData" :key="item.id">
                  <div class="cnfxFlexBox" style="width: 75px;">
                    <div class="colorBox" :style="{ background: item.background }"></div>
                    <div>{{ item.dictLabel }}</div>
                  </div>
                  <div class="cnfxFlexBox">{{ item.totalSupply }}kg</div>
                  <div class="cnfxFlexBox">{{ item.percentage }}%</div>
                </div>
              </div>
              <div class="cnfxsxBox">
                <cnfxPieChartBox :data="cnfxData" valueKey="totalSupply" nameKey="dictLabel"></cnfxPieChartBox>
              </div>
            </template>
          </ModuleBox>
        </div>
        <div class="scgxBox">
          <ModuleBox title="市场供需">
            <template #TitleRight>
              <div style="width: 100px;height: 30px;margin-right: 10px;">
                <dapingSelect v-model="scgxParameters.product_type" :options="sysProductTypeData" label-field="dictLabel"
                  value-field="dictValue" @change="scgxSplxChange">
                </dapingSelect>
              </div>
              <span style="font-size: 14px;color: #64A1FD;">月计</span>
            </template>
            <template #nr>
              <div class="scgxNrBox">
                <div class="scgxNrFor" v-for="item in scgxData" :key="item.id">
                  <div class="scgxFlexBox">{{ item.product_name }}</div>
                  <div class="scgxFlexBox">{{ item.this_month }}元/kg</div>
                  <div class="scgxFlexBox">
                    <span>{{ Math.abs(item.growth_rate).toFixed(2) }}%</span>
                    <span :style="{ color: item.growth_rate < 0 ? '#59FF00' : '#FF4400' }">{{ item.growth_rate < 0 ? '↓'
                      : '↑' }}</span>
                  </div>
                </div>
              </div>
            </template>
          </ModuleBox>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import MappingModule from '@/components/largeScreen/MappingModule.vue'
import ModuleBox from '@/components/largeScreen/ModuleBox.vue';
import dpScrolling from '@/components/largeScreen/dpScrolling.vue';
import cnfxPieChartBox from '@/components/largeScreen/cnfxPieChartBox.vue';
import jgqsLineChart from '@/components/largeScreen/jgqsLineChart.vue';
import dapingSelect from '@/components/largeScreen/dapingSelect.vue';
import {
  sysProductType,
  queryRegionList,
  cloudeyeProductsByType,
  cloudeyeSuppliersByType,
  priceTodaychange,
  priceMonthlytrend,
  priceMonthlychange,
  plantingRegions
} from '@/api/dictionary.js';
import { formatDate, getDaysBefore, getMonthsBefore, getYearsBefore } from '@/utils/time';
import { useRouter } from 'vue-router';
const router = useRouter();
onMounted(() => {
  // 给表格容器添加滚动事件监听
  if (tableTbodyRef.value) {
    tableTbodyRef.value.addEventListener('scroll', handleScroll)
  }
  sysProductTypefun()
})
onUnmounted(() => {
  // 移除滚动事件监听
  if (tableTbodyRef.value) {
    tableTbodyRef.value.removeEventListener('scroll', handleScroll)
  }
})

// 价格明细模块
const jgmxData = ref([]) // 价格明细数据
const jgmxTotal = ref(0) // 价格明细总数据
const jgmxParameters = ref({
  page: '1',
  limit: '30',
  today_date: formatDate(new Date(), 'YYYYMMDD'), // 今天日期
  yesterday_date: getDaysBefore(1, new Date(), 'YYYYMMDD'), // 昨天日期
  product_type: '', // 商品类型
  regionId: null, // 区域id
  deep: '' // 区域深度
}) // 价格明细参数
// 价格明细数据获取
const priceTodaychangefun = async () => {
  const res = await priceTodaychange(jgmxParameters.value)
  jgmxData.value = [...jgmxData.value, ...res.data];
  jgmxTotal.value = res.total;
}
// 价格明细商品类型切换
const jgmxChange = (val) => {
  jgmxParameters.value.product_type = val.dictValue
  jgmxParameters.value.page = 1
  jgmxData.value = []
  priceTodaychangefun()
}
const tableTbodyRef = ref(null) // 价格明细表格容器的ref
const isLoading = ref(false) // 价格明细加载状态
const handleScroll = () => {
  const el = tableTbodyRef.value
  if (el && !isLoading.value) {
    const { scrollTop, scrollHeight, clientHeight } = el
    // 添加防抖逻辑
    clearTimeout(el._timer)
    el._timer = setTimeout(() => {
      if (scrollTop + clientHeight >= scrollHeight - 10) {
        isLoading.value = true
        loadMoreData()
      }
    }, 300) // 300毫秒延迟
  }
}
const loadMoreData = async () => {
  const loadedCount = jgmxParameters.value.page * jgmxParameters.value.limit;
  if (loadedCount >= jgmxTotal.value) {
    console.log('所有数据已加载完毕');
    isLoading.value = false;
    return
  }
  jgmxParameters.value.page++
  priceTodaychangefun()
  isLoading.value = false
}

// 商品类型模块
const sysProductTypeData = ref([]) // 商品类型数据
const splxDeep = ref(0)
const splxSelectedValue = ref('')
const splxejSelectedValue = ref()
const splxejSysProductTypeData = ref([])
// 商品类型数据获取
const sysProductTypefun = async () => {
  const res = await sysProductType();
  sysProductTypeData.value = res.data;
  // 价格明细默认拿去第一个
  jgmxParameters.value.product_type = res.data[0].dictValue
  // 价格趋势默认拿去第一个
  jgqsParameters.value.product_type = res.data[0].dictValue
  // 市场供需默认拿去第一个
  scgxParameters.value.product_type = res.data[0].dictValue
  // 商品类型默认第一个
  splxSelectedValue.value = res.data[0].dictValue
  cloudeyeProductsByTypefun(splxSelectedValue.value) // 商品类型子集数据获取
  queryRegionListfun('0') // 种植区域数据获取
}
// 获取商品类型子集数据获取
const cloudeyeProductsByTypefun = async (productType) => {
  const { data } = await cloudeyeProductsByType({ product_type: productType });
  splxejSysProductTypeData.value = data
  if (splxejSysProductTypeData.value.length == 0) {
    splxDeep.value = 0
    splxejSelectedValue.value = 0
    return
  }
  splxejSelectedValue.value = splxejSysProductTypeData.value[0].product_id
  splxDeep.value = 1
  plantingRegionsfun() //获取地图数据
}
// 商品类型cheng
const splxChange = (val) => {
  splxSelectedValue.value = val.dictValue
  cloudeyeProductsByTypefun(val.dictValue)
}
// 商品类型子集cheng
const splxejChange = (val) => {
  splxejSelectedValue.value = val.product_id
  plantingRegionsfun() //获取地图数据
}

// 种植区域模块
const CountyDeep = ref(0)
const shengSelectedValue = ref(0)
const shengQueryRegionListData = ref([]);
const shiSelectedValue = ref(0)
const shiQueryRegionListData = ref([]);
const xianquSelectedValue = ref(0)
const xianquQueryRegionListData = ref([]);
// 种植区域数据获取
const queryRegionListfun = async (parentId, deep) => {
  const res = await queryRegionList({
    page: 1,
    limit: 100,
    parentId
  });
  CountyDeep.value = res.data.length != 0 ? res.data[0].deep : deep
  if (CountyDeep.value == 0) {
    shengQueryRegionListData.value = [
      {
        deep: 0,
        regionId: 0,
        regionCode: '100000000000',
        shangjiName: '中华人民共和国',
        regionName: '请选择'
      },
      ...res.data.map(item => {
        return {
          deep: item.deep,
          regionId: item.id,
          regionCode: item.region_code,
          shangjiName: '中华人民共和国',
          regionName: item.region_name
        }
      })
    ]
    shengSelectedValue.value = shengQueryRegionListData.value[0].regionId
  }
  else if (CountyDeep.value == 1) {
    shiSelectedValue.value = res.data[0].parent_id
    const shangjiObj = xianquListNamefun(shengQueryRegionListData.value, res.data[0].parent_id)
    shiQueryRegionListData.value = [
      {
        ...shangjiObj,
        shangjiName: shangjiObj.regionName,
        regionName: '请选择'
      },
      ...res.data.map(item => {
        return {
          deep: item.deep,
          regionId: item.id,
          regionCode: item.region_code,
          shangjiName: shangjiObj.regionName,
          regionName: item.region_name
        }
      })
    ]
    if (res.data.length == 1) {
      queryRegionListfun(res.data[0].id, res.data[0].deep + 1)
      shiSelectedValue.value = res.data[0].id
    }
  }
  else if (CountyDeep.value == 2) {
    xianquSelectedValue.value = parentId
    const shangjiObj = xianquListNamefun(shiQueryRegionListData.value, parentId)
    xianquQueryRegionListData.value = [
      {
        ...shangjiObj,
        shangjiName: shangjiObj.regionName,
        regionName: '请选择'
      },
      ...res.data.map(item => {
        return {
          deep: item.deep,
          regionId: item.id,
          regionCode: item.region_code,
          shangjiName: shangjiObj.regionName,
          regionName: item.region_name
        }
      })
    ]
    if (res.data.length == 1) {
      xianquSelectedValue.value = res.data[0].id
    }
  }
  else if (CountyDeep.value == 3) {
    xianquSelectedValue.value = parentId
  }
  // 价格明细
  jgmxParameters.value.regionId = parentId == 0 ? null : parentId
  jgmxParameters.value.deep = parentId == 0 ? null : CountyDeep.value - 1
  jgmxParameters.value.page = 1
  jgmxData.value = []
  priceTodaychangefun()
  // 价格趋势
  jgqsParameters.value.regionId = parentId == 0 ? null : parentId
  jgqsParameters.value.deep = parentId == 0 ? null : CountyDeep.value - 1
  priceMonthlytrendfun()
  // 市场供需
  scgxParameters.value.regionId = parentId == 0 ? null : parentId
  scgxParameters.value.deep = parentId == 0 ? null : CountyDeep.value - 1
  priceMonthlychangefun()
  // 产能分析
  cnfxParameters.value.regionId = parentId == 0 ? null : parentId
  cnfxParameters.value.deep = parentId == 0 ? null : CountyDeep.value - 1
  cloudeyeSuppliersByTypefun()
  // 地图数据获取
  plantingRegionsfun()
}
const mappingModuleRef = ref(null);
// 种植区域县区切换
const shengChange = (val) => {
  const mapObj = {
    ...val,
    adcode: val.regionCode.slice(0, 6),
    name: val.regionName == '请选择' ? val.shangjiName : val.regionName,
  }
  // 调用组件里的地图方法
  mappingModuleRef.value.mapClickfun(mapObj);
  queryRegionListfun(val.regionId, Number(val.deep) + 1)
}
// 地图点击事件
const MappingModuleClick = (val) => {
  if (CountyDeep.value == 0) {
    shengSelectedValue.value = val.regionId
  }
  else if (CountyDeep.value == 1) {
    shiSelectedValue.value = val.regionId
  }
  else if (CountyDeep.value == 2) {
    xianquSelectedValue.value = val.regionId
  }
  queryRegionListfun(val.regionId, Number(CountyDeep.value) + 1)
}
// 获取上级的数据
const xianquListNamefun = (list, value) => {
  return list.find(element => element.regionId == value);
}
const MapData = ref([])
// 地图数据获取
const plantingRegionsfun = async () => {
  const parameters = {
    productId: splxejSelectedValue.value, // 商品id
    year: formatDate(new Date(), 'YYYY'), // 年份
    regionId: null, // 区域id
    deep: null, // 深度
  }
  // 区域id
  if (CountyDeep.value == 0 && shengSelectedValue.value != 0) {
    parameters.regionId = shengSelectedValue.value == 0 ? null : shengSelectedValue.value
    parameters.deep = parameters.regionId == 0 ? null : CountyDeep.value
  }
  else if (CountyDeep.value == 1) {
    parameters.regionId = shiSelectedValue.value
    parameters.deep = CountyDeep.value
  }
  else if (CountyDeep.value == 2) {
    parameters.regionId = xianquSelectedValue.value
    parameters.deep = CountyDeep.value

  }
  else if (CountyDeep.value == 3) {
    const mapObj = MapData.value.find(element => element.regionId == xianquSelectedValue.value);
    MapData.value = mapObj ? [mapObj] : []
    return
  }
  const res = await plantingRegions(parameters)
  MapData.value = res.data.map(item => {
    return {
      ...item,
      region: item.region_name, // 区域名称
      value: item.total_area, // 区域数量
      regionId: item.region_id, // 区域id
    }
  })
}

// 价格趋势模块
const yearTypeDate = ref([
  {
    label: formatDate(new Date(), 'YYYY') + '年',
    value: formatDate(new Date(), 'YYYY'),
  },
  {
    label: getYearsBefore(1, new Date(), 'YYYY') + '年',
    value: getYearsBefore(1, new Date(), 'YYYY'),
  },
  {
    label: getYearsBefore(2, new Date(), 'YYYY') + '年',
    value: getYearsBefore(2, new Date(), 'YYYY'),
  },
  {
    label: getYearsBefore(3, new Date(), 'YYYY') + '年',
    value: getYearsBefore(3, new Date(), 'YYYY'),
  },
  {
    label: getYearsBefore(4, new Date(), 'YYYY') + '年',
    value: getYearsBefore(4, new Date(), 'YYYY'),
  },
  {
    label: getYearsBefore(5, new Date(), 'YYYY') + '年',
    value: getYearsBefore(5, new Date(), 'YYYY'),
  },
])
const jgqsParameters = ref({
  page: '1',
  limit: '30',
  product_type: '', // 商品类型
  regionId: null, // 区域id
  year: formatDate(new Date(), 'YYYY'),
  deep: null, // 区域深度
}) // 价格趋势参数
const jgqsData = ref([])
const priceMonthlytrendfun = async () => {
  const res = await priceMonthlytrend(jgqsParameters.value)
  jgqsData.value = res.data.map(item => ({
    name: item.product_name,
    values: Array.from({ length: 12 }, (_, index) => {
      const monthData = item.monthly_data.find(d => d.month === index + 1)
      return Number((monthData?.average_price || 0).toFixed(2))
    })
  }));
}
// 价格趋势商品类型切换
const jgqsSplxChange = (val) => {
  jgqsParameters.value.product_type = val.dictValue
  priceMonthlytrendfun()
}
// 价格趋势年份切换
const jgqsNfChange = (val) => {
  jgqsParameters.value.year = val.value
  priceMonthlytrendfun()
}

// 产能分析模块
const cnfxParameters = ref({
  regionId: null, // 区域id
  year: formatDate(new Date(), 'YYYY'),
  deep: null, // 区域深度
})
const cnfxData = ref([])
const cloudeyeSuppliersByTypefun = async () => {
  const {data} = await cloudeyeSuppliersByType(cnfxParameters.value);
  cnfxData.value = combineCnfxData(data, sysProductTypeData.value);
}
// 产能分析数据合并方法
const combineCnfxData = (suppliers, productTypes) => {
  const total = suppliers.reduce((sum, item) => sum + (item.total_supply || 0), 0);
  return productTypes.map(type => {
    const matchedSupplier = suppliers.find(s => s.product_type === type.dictValue);
    const totalSupply = matchedSupplier?.total_supply || 0;
    return {
      dictLabel: type.dictLabel,
      totalSupply: totalSupply,
      percentage: total > 0 ? ((totalSupply / total) * 100).toFixed(2) : 0,
      background: JSON.parse(type.remark).color
    };
  });
}

// 市场供需模块
const scgxData = ref([])
const scgxParameters = ref({
  page: '1',
  limit: '30',
  product_type: '', // 商品类型
  regionId: null, // 区域id
  this_year: formatDate(new Date(), 'YYYY'), // 今年
  this_month: formatDate(new Date(), 'MM'), // 本月
  last_year: getMonthsBefore(1, new Date(), 'YYYY'), // 去年
  last_month: getMonthsBefore(1, new Date(), 'MM'), // 上月
  deep: null, // 区域深度
})
const priceMonthlychangefun = async () => {
  const res = await priceMonthlychange(scgxParameters.value)
  scgxData.value = res.data
}
// 市场供需商品类型切换
const scgxSplxChange = (val) => {
  scgxParameters.value.product_type = val.dictValue
  priceMonthlychangefun()
}

// 退出
const fanhuifun = () => {
  router.go(-1);
};
</script>
<style scoped lang="scss">
.dpbjBox {
  width: 100%;
  height: 100%;
  min-width: 100vw;
  height: 100vh;
  background: url("/src/assets/daping/dpbj.png") no-repeat center center/cover;
  padding: 0 1%;
  box-sizing: border-box;

  .dptopBox {
    width: 100%;
    height: 8%;
    background: url("/src/assets/daping/dptop.png") no-repeat center center/cover;
    position: relative;

    .tuichuBox {
      position: absolute;
      left: 0;
      top: 10%;
      display: flex;
      align-items: center;
      color: #89ABED;
      cursor: pointer;
      gap: 10px;

      .tuichuImg {
        width: 16px;
        height: 16px;
      }
    }

    .titleBox {
      font-weight: bold;
      font-size: 40px;
      text-align: center;
      background: linear-gradient(180deg, #fff 0%, #7ec8ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
      padding-top: 10px;
    }
  }

  .dpnrBox {
    width: 100%;
    height: calc(90vh - 10px);
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 20px;

    .zuoyouBox {
      width: 20%;
      height: 100%;

      .baiseSize {
        font-weight: bold;
        font-size: 14px;
        color: #FFFFFF;
      }

      .jgmxTabs {
        width: 100%;
        height: 40px;
      }

      .jgmxListBox {
        margin-top: 20px;

        .tableThead {
          display: flex;
          align-items: center;
          justify-content: space-around;
          background: #00509b;

          .tableTheadTr {
            flex: 1;
            text-align: center;
            padding: 8px;
            font-size: 14px;
            color: #FFFFFF;
          }
        }

        .tableTbody {
          height: 72vh;
          overflow-y: auto;

          &::-webkit-scrollbar {
            width: 4px;
            background-color: rgba(52, 134, 206, 0.3);
          }

          &::-webkit-scrollbar-thumb {
            background: #3486CE;
            border-radius: 2px;
          }

          .tableTbodyTr {
            display: flex;
            align-items: center;
            justify-content: space-around;

            &:nth-child(even) {
              background-color: #1d5596;
            }

            .tableTbodyTrTd {
              flex: 1;
              text-align: center;
              padding: 8px;
              font-size: 14px;
              color: #FFFFFF;
            }
          }
        }
      }

      .cnfxBox {
        width: 100%;
        height: 60%;

        .cnfxTopBox {
          display: flex;
          flex-direction: column;
          height: 60%;
          justify-content: space-between;
          // gap: 10px;

          .cnfxTopFor {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .cnfxFlexBox {
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #FFFFFF;
              flex-shrink: 0;

              .colorBox {
                width: 13px;
                height: 13px;
                margin-right: 6px;
              }
            }
          }
        }

        .cnfxsxBox {
          width: 100%;
          // height: 200px;
          height: 40%;
          margin-top: 10px;
        }
      }

      .scgxBox {
        margin-top: 20px;
        width: 100%;
        height: calc(40% - 20px);

        .scgxNrBox {
          height: 27vh;
          overflow-y: auto;

          &::-webkit-scrollbar {
            width: 4px;
            background-color: rgba(52, 134, 206, 0.3);
          }

          &::-webkit-scrollbar-thumb {
            background: #3486CE;
            border-radius: 2px;
          }

          .scgxNrFor {
            display: flex;
            align-items: center;
            justify-content: space-around;

            &:nth-child(odd) {
              background-color: #1d5aa0;
            }

            .scgxFlexBox {
              flex-shrink: 0;
              font-size: 14px;
              color: #FFFFFF;
              text-align: center;
              padding: 8px;
            }
          }
        }
      }
    }

    .zhongjianBox {
      // width: 56%;
      width: calc(60% - 40px);
      height: 100%;

      .topSelctBox {
        width: 100%;
        height: 7%;
        display: flex;
        gap: 10px;
        flex-direction: column;

        .selectFlex {
          display: flex;
          align-items: center;

          .selectLabel {
            font-size: 16px;
            color: #FFFFFF;
            width: 80px;
            text-align: right;
            flex-shrink: 0;
          }

          .selectxlBox {
            width: 200px;
            height: 30px;
            margin-right: 10px;
          }
        }
      }

      .jgmxBox {
        width: 100%;
        height: 28%;
      }
    }
  }
}
</style>